<template>
    <div id="body">
        <el-row>
<el-col :offset="9">
    <el-card style="width: 480px;" shadow="always">
          <center ><h3><div class="regis">注册</div></h3></center>
            <el-form :model="entity" class="formstyle" :rules="registerFormRules" ref="registerFormRef">
       
        <el-form-item label="头像" label-width="150px">
            <el-upload action="http://localhost:9999/files/upload" :on-success="fileSuccessUpload" :file-list="fileList"
          list-type="picture">
          <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
        </el-form-item >
        <el-form-item label="用户名" label-width="150px" prop="userUsername">
          <el-input v-model="entity.userUsername" autocomplete="off" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="密码" label-width="150px" prop="userPassword">
          <el-input v-model="entity.userPassword" autocomplete="off" style="width: 80%" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" label-width="150px" >
          <el-input v-model="password" autocomplete="off" style="width: 80%" type="password"></el-input>
        </el-form-item>
        <el-form-item label="手机号" label-width="150px" prop="userPhone">
          <el-input v-model="entity.userPhone" autocomplete="off" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" label-width="150px" prop="userEmail">
          <el-input v-model="entity.userEmail" autocomplete="off" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="昵称" label-width="150px" >
          <el-input v-model="entity.userNickName" autocomplete="off" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="性别" label-width="150px" prop="userSex">
          <el-radio v-model="entity.userSex" label="1">男</el-radio>
          <el-radio v-model="entity.userSex" label="2">女</el-radio>
          <!-- <el-input v-model="entity.userSex" autocomplete="off" style="width: 80%"></el-input> -->
     
        </el-form-item>
           <!-- </el-form-item label="出生日期" label-width="200px" prop="userBirthday">
          <el-date-picker
          v-model="entity.userBirthday"
          type="date"
          placeholder="选择日期">
          
        </el-date-picker>
      </el-form-item> -->
        <el-form-item label="出生日期" label-width="150px" prop="userBirthday">
            <el-date-picker
      v-model="entity.userBirthday"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
        </el-form-item>
        <el-form-item label="身份证号码" label-width="150px" prop="userIdNumber">
          <el-input v-model="entity.userIdNumber" autocomplete="off" style="width: 80%"></el-input>
        </el-form-item>
            </el-form>
            <center><el-button type="primary" round @click="reg" size="60">注册</el-button></center>
        </el-card>
</el-col>
        </el-row>
       
           
        </div>
   
</template>

<script>
// import '@/assets/css/login/login.css'
import API from "@/api/request";
export default {
    name: 'BookShopRegister',

    components: {  },

    directives: {  },

    data() {
      var checkMobile = (rule, value, cb) => {
        // 验证手机号的正则表达式
        const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/

        if (regMobile.test(value)) {
          return cb()
        }

        cb(new Error('请输入合法的手机号'))
      }
      var checkEmail = (rule, value, cb) => {
        const regEamil = /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/
        if (regEamil.test(value)) {
          return cb()
        }
        cb(new Error('请输入合法的邮箱'))
      }
      var checksfz = (rule, value, cb) => {
        // 身份证的正则表达式
        const regsfz = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/

        if (regsfz.test(value)) {
          return cb()
        }

        cb(new Error('请输入正确的身份证号码'))
      }
        return {
            fileList: [],
            entity: {},
            password:'',
            registerFormRules:{
              userUsername:[ {required:true ,message:"请输入用户名", trigger:"blur"},],
              userPassword:[ {required:true ,message:"请输入密码", trigger:"blur"},],
              password:[ {required:true ,message:"请输入重复的密码", trigger:"blur"},],
              userPhone:[ {required:true ,message:"请输入手机号", trigger:"blur"},
              { validator: checkMobile, trigger: 'blur' },],
              userEmail:[ {required:true ,message:"请输入邮箱", trigger:"blur"},
              { validator: checkEmail, trigger: 'blur' },
            ],
              userIdNumber:[ {required:true ,message:"请输入身份证号", trigger:"blur"},
              { validator: checksfz, trigger: 'blur' },],
              userSex:[ {required:true ,message:"请选择性别", trigger:"blur"},],
         
            }
        };
    },

    mounted() {
        
    },

    methods: {
        fileSuccessUpload(res) {
      this.entity.userImages = "http://localhost:9999/files/" + res.data;
      this.fileList = [res.data]
      console.log(res)
    },
       reg(){
          this.$refs.registerFormRef.validate(valid =>{
            console.log(valid);
            if(!valid) return
            if (this.entity.userPassword!==this.password) {
        this.$message({
          type: "warning",
          message: "两次输入的密码不一致"
        })
        return;
      }
           API.post("/api/msslyyUser/register", this.entity).then(res => {
        if (res.code === '0') {
          this.$message({
            type: "success",
            message: "注册成功"
          })
          this.$router.replace("/login")
        } else {
          this.$message({
            type: "error",
            message: res.msg
          })
        }
      })
            
          })
     
       }
    },
};
</script>

<style scoped>
  

 .regis{
   color: white;
   opacity:2;
   font-size: 40px;
 }
  .el-card{
    background-color: rgb(5, 5, 5);
    opacity:0.6;
  
  }
.el-row{
    margin-top: 50px;
}

#body {
   
    width: 100%;
    min-height: 100vh;
    background-image: url("../assets/images/login/1.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow: hidden;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>